<!doctype html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" media="all" type="text/css" href="style/style-demo.css">

    <script src="script/jquery-1.11.1.js"></script>
    <script src="script/jquery.easing-1.3.js"></script>
    <script src="script/jquery.mousewheel-3.1.12.js"></script>
    <script src="script/jquery.jcarousellite.js"></script>
</head>
<body>

<div id="jcl-demo">

    <!-- Demo 4 -->
    <br><br><h4 id="demo4">Custom Widget.</h4><hr>

    <p>
        Pretty neat widget. Isn't it? Just click on the thumbnail images and you can see them magically
        change on the top. Also, i used this opportunity to use another easing effect - "backout"
    </p>

    <div class="custom-container widget">
        <div class="mid">
            <img src="image/1.jpg" alt="1">
        </div>
        <a href="#" class="prev">&lsaquo;</a>
        <div class="carousel">
            <ul>
                <li><img src="image/1.jpg"></li>
                <li><img src="image/2.jpg"></li>
                <li><img src="image/3.jpg"></li>
                <li><img src="image/4.jpg"></li>
                <li><img src="image/5.jpg"></li>
                <li><img src="image/6.jpg"></li>
                <li><img src="image/7.jpg"></li>
                <li><img src="image/8.jpg"></li>
                <li><img src="image/9.jpg"></li>
                <li><img src="image/10.jpg"></li>
                <li><img src="image/11.jpg"></li>
            </ul>
        </div>
        <a href="#" class="next">&rsaquo;</a>
        <div class="clear"></div>
    </div>

<pre class="prettyprint">
$(".widget .carousel").jCarouselLite({
    btnNext: ".widget .next",
    btnPrev: ".widget .prev",
    speed: 800,
    easing: "easeOutBack"
});

$(".widget img").click(function() {
    $(".widget .mid img").attr("src", $(this).attr("src"));
})
</pre>

    <script type="text/javascript">
        $(function() {
            $(".widget .carousel").jCarouselLite({
                btnNext: ".widget .next",
                btnPrev: ".widget .prev",
                speed: 800,
                easing: "easeOutBack"
            });
            $(".widget img").click(function() {
                $(".widget .mid img").attr("src", $(this).attr("src"));
            })
        });
    </script>

</div>
</body>
</html>